<template>
  <div>
    <el-container>
      <el-header class="header">
        <div class="logo">
          <img
            src="https://destiny001.gitee.io/admin-dist/img/logo.b5a855ee.png"
          />
          <span>杭州9期后台管理系统</span>
        </div>
        <el-button @click="quitBtn" plain size="medium" class="quit-btn"
          >退出</el-button
        >
      </el-header>
      <el-container>
        <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
    <el-menu :default-openeds="['1', '3']">
      <el-submenu index="1">
        <template slot="title"><i class="el-icon-message"></i>导航一</template>
        <el-menu-item-group>
          <el-menu-item index="1-1">选项1</el-menu-item>
          <el-menu-item index="1-2">选项2</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
    </el-menu>
  </el-aside>
        <el-main>Main</el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data () {
    return {
      isCollapse: true
    }
  },

  created () {},

  methods: {
    quitBtn () {
      localStorage.removeItem('ht-user')
      location.href = '/login'
    },
    handleOpen (key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath)
    }
  }
}
</script>

<style scoped lang="less">
.el-header {
  background-color: #373d41;
  color: #fff;
  text-align: center;
  line-height: 60px;
  .logo {
    width: 309px;
    height: 56px;
    display: flex;
    align-items: center;
  }
  span {
    font-size: 25px;
    margin-left: 8px;
  }
  .quit-btn {
    padding: 12px 20px;
  }
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
}
.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 160px;
}
</style>
